import './index.scss'
import {useState, useEffect} from 'react'
import {Modal, Menu, Spin} from 'antd'
import {useGetArchiveList} from '@/hook'
import {getBannerList} from '@/request'
import { Input } from 'antd';

const getItem = (label, key, icon, children) => {
    return {
        key,
        icon,
        children,
        label,
    }
}

const MyMenu = ({updateData}) => {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [selectedKeyIndex, setSelectedKeyIndex] = useState(0)
    const {archive, updateArchiveList} = useGetArchiveList()

    const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');

    const handleSearch = () => {
        // 这里是处理搜索的函数，你可以在这里调用你的 API
        console.log(searchTerm);
        // 这里让浏览器跳转新的网站，开新的标签页，网址是：http://mio.natapp1.cc/fan?search=xxx
        window.open(`http://mio.natapp1.cc/fan?search=${searchTerm}`, '_blank');
        setIsSearchModalOpen(false);
        setSearchTerm('');
    }

    const MenuItem = [
        getItem(
            '番剧归类',
            'sub1',
            <svg
                t="1692614783374"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4148"
                width="24"
                height="24"
            >
                <path
                    d="M414.032031 327.280218a99.711969 99.711969 0 1 1-99.711969-99.711969 99.903969 99.903969 0 0 1 99.711969 99.711969m-66.52798 0a33.18399 33.18399 0 1 0-33.183989 33.183989 33.16799 33.16799 0 0 0 33.183989-33.183989"
                    fill="#3E9EFF"
                    p-id="4149"
                ></path>
                <path
                    d="M612.463969 197.376258l301.279905 305.935905a103.375968 103.375968 0 0 1 30.399991 73.999977 101.951968 101.951968 0 0 1-30.031991 73.327977l-273.279914 266.111917a112.687965 112.687965 0 0 1-147.823954-0.16L153.392112 584.464137C94.81613 527.536155 79.888135 504.800162 79.888135 427.664186v-146.175954C79.888135 143.616275 107.920126 82.064294 274.000074 82.064294H411.088032c84.287974-0.16 133.391958 48.287985 201.423937 115.311964m-17.919995 671.59979l273.199915-265.967916a35.567989 35.567989 0 0 0 9.791997-25.711992 36.527989 36.527989 0 0 0-10.783997-26.879992l-273.423914-278.559913-27.711992-27.039992c-67.695979-66.863979-100.047969-96.39997-154.783951-96.399969h-137.039958c-118.959963 0-127.58396 18.415994-127.58396 132.895958v146.159954c0 52.591984 1.488 58.895982 53.423984 109.167966l339.615893 332.319896a39.311988 39.311988 0 0 0 27.535992 10.111997 39.711988 39.711988 0 0 0 27.711991-10.111997"                    fill="#3E9EFF"
                    p-id="4150"
                ></path>
            </svg>,
            archive
        ),
        getItem(
            <div onClick={() => setIsSearchModalOpen(true)}>搜索番剧</div>,
            'search',
            <svg
                t="1692614783374"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4148"
                width="24"
                height="24"
            >
                <path
                    d="M414.032031 327.280218a99.711969 99.711969 0 1 1-99.711969-99.711969 99.903969 99.903969 0 0 1 99.711969 99.711969m-66.52798 0a33.18399 33.18399 0 1 0-33.183989 33.183989 33.16799 33.16799 0 0 0 33.183989-33.183989"
                    fill="#3E9EFF"
                    p-id="4149"
                ></path>
                <path
                    d="M612.463969 197.376258l301.279905 305.935905a103.375968 103.375968 0 0 1 30.399991 73.999977 101.951968 101.951968 0 0 1-30.031991 73.327977l-273.279914 266.111917a112.687965 112.687965 0 0 1-147.823954-0.16L153.392112 584.464137C94.81613 527.536155 79.888135 504.800162 79.888135 427.664186v-146.175954C79.888135 143.616275 107.920126 82.064294 274.000074 82.064294H411.088032c84.287974-0.16 133.391958 48.287985 201.423937 115.311964m-17.919995 671.59979l273.199915-265.967916a35.567989 35.567989 0 0 0 9.791997-25.711992 36.527989 36.527989 0 0 0-10.783997-26.879992l-273.423914-278.559913-27.711992-27.039992c-67.695979-66.863979-100.047969-96.39997-154.783951-96.399969h-137.039958c-118.959963 0-127.58396 18.415994-127.58396 132.895958v146.159954c0 52.591984 1.488 58.895982 53.423984 109.167966l339.615893 332.319896a39.311988 39.311988 0 0 0 27.535992 10.111997 39.711988 39.711988 0 0 0 27.711991-10.111997"                    fill="#3E9EFF"
                    p-id="4150"
                ></path>
            </svg>,
        ),
        getItem(
            <div>
                <div onClick={() => setIsModalOpen(true)}>网站介绍</div>
                <Modal
                    title="椰羊动漫"
                    centered
                    onOk={() => setIsModalOpen(false)}
                    onCancel={() => setIsModalOpen(false)}
                    visible={isModalOpen}
                >
                    <p>
                        新网站：mio.natapp1.cc
                    </p>
                </Modal>
            </div>,
            'sub2',
            <svg
                t="1692615004338"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9435"
                width="22"
                height="22"
            >
                <path
                    d="M936.533333 825.6c-53.333333-61.866667-153.6-110.933333-277.333333-132.266667-12.8-2.133333-21.333333-12.8-21.333333-23.466666v-4.266667c0-8.533333 4.266667-17.066667 10.666666-19.2 93.866667-55.466667 153.6-164.266667 153.6-281.6 0-177.066667-130.133333-320-290.133333-320s-290.133333 142.933333-290.133333 320c0 117.333333 59.733333 226.133333 153.6 281.6 6.4 4.266667 10.666667 10.666667 10.666666 19.2v4.266667c0 10.666667-8.533333 21.333333-21.333333 23.466666-123.733333 21.333333-224 70.4-277.333333 132.266667-23.466667 27.733333-29.866667 66.133333-14.933334 100.266667s49.066667 55.466667 85.333334 55.466666h706.133333c36.266667 0 70.4-21.333333 85.333333-55.466666 17.066667-34.133333 10.666667-72.533333-12.8-100.266667z"
                    fill="#80B8F8"
                    p-id="9436"
                ></path>
            </svg>
        ),
        getItem(
            <a
                href="https://pd.qq.com/s/f7tvi15cp"
                target="_blank"
                rel="noopener noreferrer"
            >
                QQ频道
            </a>,
            'link',
            <svg
                t="1692615261029"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="15185"
                width="24"
                height="24"
            >
                <path
                    d="M666.122449 909.061224c-10.44898 0-21.420408-1.044898-31.869388-2.612244-39.183673-4.702041-74.710204-23.510204-100.832653-53.289796-13.583673 5.22449-28.212245 5.22449-41.795918 0-21.420408 28.212245-61.64898 48.065306-108.669388 53.289796-66.35102 7.314286-138.44898-11.493878-144.718367-55.379592-5.22449-34.481633 37.093878-61.126531 81.502041-75.755102-25.6-28.212245-43.363265-63.738776-51.2-101.355102l-0.522449 0.522449c-25.077551 31.346939-41.795918 50.155102-61.126531 50.155102-2.089796 0-4.179592-0.522449-6.269388-1.044898-7.314286-2.612245-13.061224-8.881633-17.240816-18.808164-16.195918-34.481633-9.404082-100.310204 15.15102-150.465306 0 0 0-0.522449 0.522449-0.522449 12.538776-22.465306 27.689796-43.363265 45.453061-62.171428-6.269388-11.493878-10.44898-24.032653-12.016326-37.093878v-3.134694c0.522449-19.330612 10.44898-37.093878 26.644898-47.542857-10.971429-73.142857 9.926531-147.330612 58.514286-203.232653 49.110204-56.946939 120.163265-88.816327 194.873469-86.204081h4.702041c65.306122 0 129.567347 26.122449 177.110204 72.097959 49.110204 47.542857 76.8 112.326531 77.844898 180.767347v7.314285c0.522449 9.926531 0 19.330612-1.044898 29.257143 14.106122 8.881633 21.420408 20.37551 21.420408 48.065306 0 13.583673-1.044898 27.689796-9.926531 36.04898 13.061224 17.763265 28.734694 42.840816 41.27347 62.693877l2.612245 4.179592c20.37551 32.391837 23.510204 74.187755 22.987755 96.130613 0 17.240816-2.089796 58.514286-18.285714 70.530612-3.657143 2.612245-7.314286 3.657143-12.016327 3.657143h-4.179592c-26.122449 0-41.273469-23.510204-57.991837-48.587755l-1.567347-2.089796c-8.881633 36.571429-26.122449 71.053061-50.677551 99.265306 27.167347 9.404082 83.069388 31.346939 75.755103 73.142857-5.746939 35.526531-55.902041 62.171429-114.416327 62.171428z m-388.702041-63.738775z m250.253061-11.493878z m276.375511-140.016326z m-47.020409-235.102041z"
                    fill="#7BD4EF"
                    p-id="15186"
                ></path>
            </svg>
        ),
    ]

    useEffect(() => {
        updateArchiveList()
    }, [])

    const handleClick = (e) => {
        const selectedIndex = archive.findIndex((item) => item.key === e.key)
        // archive 数组的长度是否大于 selectedKeyIndex
        if (selectedIndex >= 0 && selectedIndex < archive.length) {
            setSelectedKeyIndex(selectedIndex)
            archive.map(async (item) => {
                if (e.key === item.key) {
                    let response = await getBannerList(item.label.replace('-', ''))
                    updateData(response)
                }
            })
        }
    }

    return (
        <>
            {archive && archive.length > 0 && (
                <div className="menu-container">
                    <Menu
                        theme="light"
                        onClick={handleClick}
                        style={{
                            width: '100%',
                            borderRadius: '8px',
                            boxShadow: '0 5px 8px rgba(0, 0, 0, 0.15)',
                        }}
                        defaultOpenKeys={['sub1']}
                        selectedKeys={[archive[selectedKeyIndex].key]}
                        mode="inline"
                        items={MenuItem}
                    />

                    <Modal
                        title="搜索番剧"
                        centered
                        onOk={handleSearch}
                        onCancel={() => setIsSearchModalOpen(false)}
                        visible={isSearchModalOpen}
                    >
                        <Input
                            placeholder="请输入番剧名称"
                            value={searchTerm}
                            onChange={e => setSearchTerm(e.target.value)}
                        />
                    </Modal>

                </div>
            )}
            {!archive && (
                <div className="menu-container">
                    <Spin size="large" />
                </div>
            )}
        </>
    )
}

export default MyMenu